<template lang="pug">
  .ChooseExportTemplateModal
    Modal(
      v-model="isShowChooseExportTemplateModal"
      title="选择导出模板"
      class-name="vertical-center-modal"
      width="700"
       @on-cancel="cancel"
    )
      Input.has-border.mb-20(v-model="searchValue" search enter-button="搜索" @on-search="getExportList" placeholder="输入模板名称关键字")
      RadioGroup(v-model="templateId" vertical style="width:100%;height:300px;overflow-y:scroll;")
        Row.mb-10(v-for="(item,index) in templateList" :key="index")
          Col(span="16")
            Radio(:label="item.id")
              span {{item.name}}
          Col(span="8")
            Button.mr-10(type="info" size="small" @click="updateTemlate(item.id, item.name)") 编辑
            Button(type="warning" size="small" @click="deleteTemlate(item.id)") 删除
      .line-h-32.font-12.text-error 温馨提示：不选择模板时，直接点击确认可导出列表显示格式！
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="info" @click="addTemplate") 添加模板
        Button(type="primary" @click="chooseTemplate") 确定
    

    Modal(v-model="customizeTemplateModal" title="自定义模板" width="800px")
      .template-title.mb-15
        span 模板名称：
        Input(v-model="customizeTemplateTitle" type="text" style="width:auto" placeholder="请输入")
      .ivu-transfer
        .ivu-transfer-list.mr-15(style="width:300px")
          .ivu-transfer-list-header
            Checkbox(v-model="isAllSelect" @on-change="selectAll")
              | 待选字段
          .ivu-transfer-list-body
            .ivu-transfer-list-content
              CheckboxGroup(v-model="transferDataValue"
              @on-change="transferDataChange")
                .ivu-transfer-list-content-item(v-for="(item,index) in transferData")
                  Checkbox(:label="item.key")
                    span {{item.value}}
        .ivu-transfer-list(style="width:450px")
          .ivu-transfer-list-header
            | 已选字段
          .ivu-transfer-list-body
            .ivu-transfer-list-content
              .ivu-transfer-list-content-item(v-for="(item,index) in transferKeys")
                span {{item.value}}
                span.pull-right
                  Button(size="small" @click="upGo(transferKeys,index)")
                    Icon(type="md-arrow-up")
                  Button(size="small" @click="downGo(transferKeys,index)")
                    Icon(type="md-arrow-down")
      div(slot="footer")
        Button(@click="customizeCancel") 取消
        Button(type="info" @click="customizeConfirm") 确定
</template>

<script>
import { Common } from '@/utils/common.js'
// import { EnumApi } from '@/api/Enum.api'
import changeManageApi from '@/api/changeManage.js'
export default {
  name: 'ChooseExportTemplateModal',

  watch: {
  },

  data () {
    return {
      searchValue: '',
      isShowChooseExportTemplateModal: false,
      customer: [],
      targetKeys: [],
      templateModal: false, // 导出模板
      templateType: null, // 导出模板类型：11-社保，12-公积金，13-商保
      templateList: null, // 导出模板列表
      templateId: '', // 模板idtitles: ['待选客户名称', '已选客户名称'],
      customizeTemplateModal: false, // 自定义模态窗
      customizeTemplateTitle: '', // 自定义模版名称
      isAllSelect: false, // 自定义模板中的全选字段
      transferData: [],
      transferDataValue: [],
      transferKeys: [],
      transferKeysValue: [],
      currentMonth: null,
      currentCompanyIds: null,
    }
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowChooseExportTemplateModal = false
      this.templateId = ''
    },

    show (templateType, currentMonth, currentCompanyIds) {
      this.templateType = templateType
      this.currentMonth = currentMonth
      this.currentCompanyIds = currentCompanyIds
      console.log('currentMonth: ', currentMonth)
      this.isShowChooseExportTemplateModal = true
    },

    // 添加模板按钮
    addTemplate () {
      this.templateId = ''
      this.customizeTemplateTitle = ''
      this.customizeTemplateModal = true
      this.transferKeys = []
      this.transferData_filter = []
      this.transferDataValue = []
      changeManageApi.getSalaryModel({
        BusinessType: this.templateType,
        Type: 2,
        CompanyIds: this.currentCompanyIds,
        Month: this.currentMonth,
        BusinessType: this.templateType
      }).then(res => {
        console.log(res)
        this.transferData = res.data.data.chosenColumnList
        this.getLastData(this.transferData, this.transferData_filter)
        console.log(this.transferData_filter)
      })
    },

    // 编辑自定义模板
    updateTemlate (id, name) {
      this.templateId = id
      this.customizeTemplateTitle = name
      this.customizeTemplateModal = true
      this.transferData_filter = []
      changeManageApi.getSalaryModel({
        BusinessType: this.templateType,
        Type: 2,
        id: id,
        CompanyIds: this.currentCompanyIds,
        Month: this.currentMonth,
        BusinessType: this.templateType
      }).then(res => {
        this.transferData = res.data.data.chosenColumnList
        this.getLastData(this.transferData, this.transferData_filter)
        this.transferKeys = res.data.data.selectedColumnList
        this.transferDataValue = this.transferKeys.map(item => {
          return item.key
        })
      })
    },

    // 删除自定义模板
    deleteTemlate (id) {
      changeManageApi.deleteCustomize({
        id: id
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.getExportList()
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 获取最后一级数据
    getLastData (arr, arr_2) {
      arr.forEach(item => {
        // arr_2.push(item)
        if (item.childs) {
          this.getLastData(item.childs, arr_2)
        } else {
          arr_2.push(item)
        }
      })
    },

    // 获取导出模板列表
    getExportList () {
      this.templateId = ''
      changeManageApi.getCustomTemplate({
        businessType: this.templateType,
        Name: this.searchValue,
        PageIndex: 1,
        PageSize: 10
      }).then(res => {
        console.log(res)
        this.templateList = res.data.data
      })
    },

    // 导出
    exportBtn (Boolean) {
      this.isLock = Boolean
      console.log(this.isLock)
      this.templateModal = true
      this.getExportList()
    },

    // 自定义模板取消
    customizeCancel () {
      this.customizeTemplateModal = false
    },

    // 自定义模板确定
    customizeConfirm () {
      if (this.transferKeys.length > 0) {
        let detail = []
        this.transferKeys.forEach(item => {
          detail.push({
            name: item.value,
            code: item.key
          })
        })
        changeManageApi.SaveCustomize({
          id: this.templateId,
          BusinessType: this.templateType,
          Type: 2,
          Name: this.customizeTemplateTitle,
          Detail: detail
        }).then(res => {
          if (res.data.success) {
            this.getExportList()
            this.$Message.success(res.data.message)
            this.customizeTemplateModal = false
          } else {
            
            this.$Message.error({
              content: res.data.message,
              duration: 10,
              closable: true
            })
          }
        })
      } else {
        this.$Message.warning('请选择字段')
      }
    },

    // 模板选择取消
    chooseTemplateCancel () {
      this.templateId = ''
      this.templateModal = false
    },

    // 选择模板之后确定
    chooseTemplate () {
      console.log('选择模板之后确定 templateId: ', this.templateId, ', targetKeys: ', this.targetKeys)
      this.$emit('chooseTemplate', this.templateId)
      this.templateId = ''
    },

    // 自定义模板
    transferDataChange (val) {
      // console.log(val)
      if (val) {
        console.log(this.transferData.length)
        if (val.length === this.transferData.length) {
          this.isAllSelect = true
        } else {
          this.isAllSelect = false
        }
      }
      this.transferKeys = this.transferData.filter(item => this.transferDataValue.some(ele => ele === item.key))
    },

    selectAll () {
      if (this.isAllSelect) {
        console.log(1111111111)
        this.transferDataValue = this.transferData.map(item => {
          return item.key
        })
      } else {
        console.log(222222)
        this.transferDataValue = []
      }
      this.transferDataChange()
    },

    upGo (transferKeys, index) {
      if (index != 0) {
        transferKeys[index] = transferKeys.splice(index - 1, 1, transferKeys[index])[0]
      } else {
        // transferKeys.push(transferKeys.shift())
        return false
      }
    },

    downGo (transferKeys, index) {
      if (index != transferKeys.length - 1) {
        transferKeys[index] = transferKeys.splice(index + 1, 1, transferKeys[index])[0]
      } else {
        // transferKeys.unshift( transferKeys.splice(index,1)[0])
        return false
      }
    },

    // handleSubmit () {
    //   this.$emit('chooseSubmit', this.targetKeys)
    //   this.cancel()
    // }
  }
}
</script>

<style lang="less" scoped>
</style>
